<template>
  <div class="box">
    <img src="../../assets/images/error_images/404.png" alt="" />
    <div class="right">
      <p class="title">你访问的界面不存在！</p>
      <p class="warning">管理员说你不能进入此界面</p>
      <p class="tips">请检查你的url是否正确,或点击下面按钮回到首页</p>
      <el-button class="button" type="primary" round @click="goHome">
        返回到首页
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
let $router = useRouter()
const goHome = () => {
  $router.push('/home')
}
</script>

<style scoped lang="scss">
.box {
  position: relative;
  width: 100vw;
  height: 100vh;

  img {
    position: absolute;
    left: 100px;
    width: 1015px;
    height: 556px;
  }

  .right {
    position: absolute;
    left: 900px;
    top: 170px;
    display: flex;
    flex-direction: column;

    .title {
      margin-bottom: 25px;
      color: rgb(23, 121, 237);
      font-size: 40px;
      font-weight: 900;
      animation: moveIn 0.8s forwards;
    }

    .warning {
      opacity: 0;
      margin-bottom: 15px;
      font-size: 25px;
      font-weight: 900;
      animation: moveIn 0.8s 0.1s forwards;
    }

    .tips {
      opacity: 0;
      margin-bottom: 30px;
      color: rgb(163, 165, 166);
      animation: moveIn 0.8s 0.2s forwards;
    }

    .button {
      opacity: 0;
      width: 125px;
      height: 40px;
      animation: moveIn 0.8s 0.3s forwards;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

@keyframes moveIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
    transform: translateY(-20px);
  }
}
</style>
